引導列

HTML

<ul class="menu">
    <li><a href="#">首頁</a></li>
    <li><a href="#">政治</a></li>
    <li><a href="#">財經</a></li>
    <li><a href="#">娛樂</a></li>
    <li><a href="#">論壇</a></li>
    <li><a href="#">新聞</a></li>
</ul>

CSS

.menu{
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.menu li{
    border: 3px solid black;
    width: 100px;
    text-align: center;
}

.menu li a{
    background-color: #00FF55;
    display: block;
    padding: 10px;
    text-decoration: none;
}

.menu li a:hover{
    background-color: #FF0055;
    color: forestgreen;
}

原理：要先做CSS Reset，接著用ul>li包覆著a連結，
透過display:flex來做排版，再設定hover效果

滑動按鈕

用<input> checkbox包住滑動條、滑動條包住按鈕

因為要讓checkbox預設的方框框隱藏起來，這邊用了hidden

HTML

<label>
    <input type="checkbox" hidden>
    <div class="slider-bar">
        <div class="btn"></div>
    </div>
</label>

CSS

.slider-bar{
    height: 20px;
    width: 40px;
    display: inline-block;
    border-radius:10px;
    background: #ccc;
}

.btn{
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #999;
    border: 1px solid gray;
    transition: 0.5s;
}

input[type="checkbox"]:checked + .slider-bar .btn{
    margin-left: 20px;
    background: white;
}

原理:
先造出一個 slider-bar 當作灰色的底，
再造一個黑色圓形按鈕，
而滑動效果是按了按鈕後，讓按鈕margin-left偏移20px，再加上動畫效果transition的0.5s

也可以在打開開關時(:checked)，額外再加上綠色背景的效果。

同心圓、圓中點

HTML

<div class="dot"></div>

CSS

.dot{
    width: 200px;
    height: 200px;
    background: black;
    border: 20px solid white;
    box-shadow: 0 0 0 20px black;
    border-radius: 50%;
}

原理：
先設width、height，接著用border畫出外層框(白色)、設border-radius圓形，
最後再用box-shadow造出最外層黑框效果。

限時特價商品

HTML

<ul class="product-list">
    <li class="product">
        <div class="on-sale">限時特賣</div>
        <img src="https://picsum.photos/200/200" alt="">
        <h2>產品A</h2>
        <span>NT$ 200</span>
    </li>
    <li class="product">
        <div class="on-sale">限時特賣</div>
        <img src="https://picsum.photos/200/200" alt="">
        <h2>產品A</h2>
        <span>NT$ 200</span>
    </li>
    <li class="product">
        <div class="on-sale">限時特賣</div>
        <img src="https://picsum.photos/200/200" alt="">
        <h2>產品A</h2>
        <span>NT$ 200</span>
    </li>
</ul>

CSS

.product-list{
    display: flex;
}

.product{
    width: 200px;
    height: 300px;
    margin: 15px;
    padding: 10px;
    outline: 1px solid brown;
    position: relative;
}

.product h2{
    font-size: 20px;
    margin-bottom: 20px;
}

.product span{
    color: red;
    font-size: 20px;
}

.product .on-sale{
    writing-mode: vertical-lr;
    background: red;
    padding: 5px;
    left: 20px;
    position: absolute;
    color: wheat;
}

用ul>li包住圖片、文字商品名稱，以及限時特價標籤，商品設定width、height。
限時特價標籤的部分透過絕對定位，相對定位點設定在父元素上，搭配上文字垂直模式。
用display: flex的方式來排版、在外框上一個outline。